<template>
  <div>
    <div
      v-if="formBox.directions"
      class="directions"
    >
      <span>说明：</span>{{ formBox.directions }}
    </div>
    <a-form-model
      ref="ruleForm"
      :model="formData"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      :rules="formBox.rules"
      @submit="submitForm"
    >
      <a-form-model-item
        v-for="(item, index) in getConfigList()"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <!-- input -->
        <a-input
          v-if="item.type === 'text'"
          v-model="formData[item.prop]"
          :placeholder="item.placeholder"
        />
        <!-- inputNumber -->
        <a-input-number
          v-if="item.type === 'inputNumber'"
          style="width:300px;"
          :max="item.max"
          :min="item.min"
          v-model="formData[item.prop]"
          :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\$\s?|(,*)/g, '')"
        />
        <!-- select 下拉 -->
        <a-select
          v-if="item.type === 'select'"
          :autoClearSearchValue="false"
          :showSearch="item.showSearch ? true : false"
          v-model="formData[item.prop]"
          :mode="item.isMultiple"
          :placeholder="item.placeholder"
          :allowClear="item.isAllowClear || true"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="option in formOptions[item.options]"
            :key="option.label"
            :value="option.value"
          >
            {{ option.label }}
          </a-select-option>
        </a-select>
        <!-- switch -->
        <a-switch
          v-if="item.type === 'switch'"
          v-model="formData[item.prop]"
          @change="switchChang"
        >
          <a-icon slot="defaultChecked" type="check" />
        </a-switch>
        <!-- radio-group -->
        <a-radio-group
          v-if="item.type === 'radioGroup'"
          v-model="formData[item.prop]"
          button-style="solid"
        >
          <a-radio-button
            v-for="(item,index) in item.forRadio()"
            :key="index"
            :value="item.value"
          >
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <!-- （针对广告组预算） -->
        <div v-if="item.type === 'radioGroupMoving'">
          <a-radio-group
            v-model="formData[item.prop]"
            button-style="solid"
            @change="radioChange"
          >
            <a-radio-button
              v-for="(item,index) in item.forRadio()"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-radio-button>
          </a-radio-group>
          <div v-if="item.moving && formData[item.prop] === item.movingItem ">
            <a-input-number
              ref="moving"
              v-model="movingData"
              :min="300" :max="99999"
            />
          </div>
        </div>

      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  props:{
    formData:{
      type:Object,
      required: true
    },
    formOptions: {
      type: Object
    },
    formBox:{
      type:Object
    }
  },
  data() {
    return {
      movingData:'300'  //（针对广告组预算）
    };
  },
  watch:{
    'movingData':function (params) {
      this.formData.budget = parseInt(params)
    }
  },
  methods: {
    // 过滤数据temp(显示隐藏表单)
    getConfigList () {
      return this.formBox.formItem.filter(item => !item.hasOwnProperty('show') || (item.hasOwnProperty('show') && item.show))
    },
    // a-select 自定义搜索（label）
    filterOption(input, option){
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    switchChang(checked){
      // console.info(checked,this.formData,'checked')
    },
    submitForm(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('subimt',this.formData)
        } else {
          return false;
        }
      });
    },
    // 单选change（针对广告组预算）
    radioChange(event){
      if(event.target.value !== 'BUDGET_MODE_DAY'){
        delete this.formData.budget
      }else {
        this.formData.budget = parseInt(this.movingData)
      }
      console.info(this.formData,'form')
    }
  },
}
</script>

<style lang="less" scoped>
  .directions{
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    span{
      color: red;
    }
  }
</style>